<template>
  <view class="layout detail" v-if="orderInfo && orderInfo.good">
    <view class="panel-title" v-if="orderInfo.isReal">虚拟订单</view>
    <view class="panel-title" v-else>实物订单</view>
    <view class="mobile" v-if="orderInfo.isReal">
      <view class="label">收货人手机号</view>
      <view class="number" v-text="orderInfo.mobile"></view>
    </view>

    <view class="kd" v-if="!orderInfo.isReal">
      <view class="image"><image src="/static/images/address/list_ico2.png"></image></view>
      <view class="content">
        <view class="no">
          <view class="number">快递单号:{{ orderInfo.shipCompany || "无" }}</view>
          <view class="copy" @tap="copy(orderInfo.shipId)" v-if="orderInfo.shipId">复制单号</view>
        </view>
        <view class="tip">快递公司:{{ orderInfo.shipId || "无" }}</view>
      </view>
    </view>

    <view v-if="!orderInfo.isReal" style="margin-bottom: 20upx;border-radius: 10upx;overflow: hidden;">
      <address-list><address-item :name="orderInfo.userName" :mobile="orderInfo.mobile" :address="orderInfo.address"></address-item></address-list>
    </view>

    <order-item
      :title="orderInfo.productName"
      :price="orderInfo.price"
      :status="orderInfo.status"
      :amount="orderInfo.amount"
      :thumb="orderInfo.good && orderInfo.good.thumb ? orderInfo.good.thumb[0].url : ''"
    ></order-item>

    <view class="order-info">
      <div class="order-info-title">订单信息</div>
      <div class="order-info-content">
        <view class="item" v-if="orderInfo.vendorId != -1">
          <view class="item-label">订单编号：</view>
          <view class="item-text" v-text="orderInfo.vendorId"></view>
        </view>
        <view class="item">
          <view class="item-label">购买时间：</view>
          <view class="item-text">{{ orderInfo.created | dateFormat }}</view>
        </view>
        <view class="item" v-if="orderInfo.status != 0 && orderInfo.delivered >= 0">
          <view class="item-label">发货时间：</view>
          <view class="item-text">{{ orderInfo.delivered | dateFormat }}</view>
        </view>
        <view class="item" v-else>
          <view class="item-label">发货时间：</view>
          <view class="item-text">所有商品会在24～48小时内发货,请耐心等待哦～</view>
        </view>
      </div>
      <view class="footer"><button class="cu-btn round sm" @tap="onClickContact">联系客服</button></view>
    </view>
  </view>
</template>

<script>
import uniApp from "@/utils/uni-app";
// 组件
import orderItem from "@/components/shop/orderItem";
import addressList from "@/components/address/index";
import addressItem from "@/components/address/item";
let id;
export default {
  components: {
    orderItem,
    addressList,
    addressItem
  },
  data() {
    return {
      orderInfo: {}
    };
  },
  onLoad(option) {
    id = option.id || 0;
    if (!id) {
      uni.navigateBack();
    }
    this.init();
  },
  methods: {
    init() {
      return this.$api.good.orderDetail(id).then(_ => {
        this.orderInfo = _.data.data;
        return _;
      });
    },
    onClickContact() {
      uni.makePhoneCall({
        phoneNumber: "400-687-1621"
      });
    },
    copy(text) {
      uniApp.copy(text.toString(), function() {
        uniApp.toast("复制成功");
      });
    }
  },
  onPullDownRefresh() {
    this.init().then(() => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  width: 100%;
  padding: 10upx 20upx;
}
.panel-title {
  padding: 10upx 0;
}

.mobile {
  margin-bottom: 20upx;
  background-color: #ffffff;
  border-radius: 10upx;
  padding: 40upx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .number {
    padding-left: 20upx;
    color: #0f86c3;
  }
}

.kd {
  margin-bottom: 20upx;
  background-color: #ffffff;
  border-radius: 10upx;
  padding: 20upx 20upx 20upx 30upx;
  display: flex;
  justify-content: center;
  align-items: center;
  .image {
    width: 100upx;
    height: 100upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    padding-left: 40upx;
    width: calc(100% - 100upx);
    font-size: 24upx;
    color: #0f86c3;
    view {
      line-height: 40upx;
    }
    .no {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .copy {
        background-color: #ff9c1e;
        color: #ffffff;
        padding: 0 10upx;
        border-radius: 8upx;
      }
    }
  }
}
.order-info {
  background-color: #ffffff;
  margin-top: 20upx;
  border-radius: 10upx;
  padding: 0 20upx;
  &-title {
    text-align: center;
    color: #0f86c3;
    font-size: 32upx;
    padding: 20upx 0;
  }
  &-content {
    .item {
      display: flex;
      align-items: flex-start;
      line-height: 44upx;
      color: #818181;
      &-label{
        width: 160upx;
      }
      &-text{
        width: calc(100% - 160upx);
      }
    }
  }
  .footer {
    text-align: center;
    .cu-btn {
      background-color: #0f86c3;
      color: #ffffff;
      margin: 20upx auto;
      padding: 0 80upx;
    }
  }
}
</style>
